<template>
	<view class="center">
		<!-- popup -->
			<popup :open="openPopup" :position="position" :percent="percent" :background="background" @close="close">
			    <view class="shop-btn" style="text-align: center;">
				
			      <button :class="{'active' :shop_name==uinfo.sName}"  @click="updateDefaultShop(uinfo)"  v-for="(uinfo, index) in userShopList" :key="index" >{{uinfo.sName}}</button>
			      			
			    </view>
			</popup>
		<!--<popup :open="openPopup" @close="openPopup = false">
		  <view class="login-form" style="display: inline-block;" v-show="show_login">
			<view class="b-line">
			用户名: <input type="username" v-model="cusername" maxlength="30"  >
			</view>
			<view class="b-line">
			密&nbsp;&nbsp;码: <input type="password" v-model="cpassword" >
			</view>
			<button class="qr" @click="subLogin">确认</button>
		  </view>
		  <view class="login-form" style="display: inline-block;" v-show="show_logout">
			 <button class="qr" @click="subLogout">注销</button> 
		  </view>
		</popup>-->
		<view class="logo" @click="navTo('/pages/set/set')" :hover-class="uerInfo.name!=''  ? 'logo-hover' : ''">
			<image class="logo-img" :src="uerInfo.name!='' ? uerInfo.avatarUrl :''"></image>
			<view class="logo-title">
				<text class="uer-name">Hi，{{uerInfo.name!='' ? uerInfo.name : '您未登录'}}</text>
				<text class="go-login navigat-arrow" v-if="uerInfo.name!=''">&#xe65e;</text>
			</view>
		</view>
		<text class="shop-name">当前门店:{{shop_name}} <span class="shop-change" @click="changeShop" v-if="userShopList.length>1">切换</span></text>
		<view class="personal-card">
			
				<router-link to='/pages/ucenter/work_member' v-show="islogin">
				<text class="text-effect">电子工牌</text>
				</router-link>
			<!-- <router-link  to='/pages/ucenter/need_ask' v-show="islogin">
			<text class="list-icon">&#xe639;</text>
			<text class="list-text">新客户咨询</text>
			<text class="navigat-arrow">&#xe65e;</text>
			</router-link> -->
			
		</view>
		<view class="personal-list">
			<view class="personal-list-item">
			<router-link  to='/pages/ucenter/need_ask' v-show="islogin">
			<image src="/static/zixun.png" mode="" class="img"></image>
			<text class="personal-list-text">新客户咨询</text>
			</router-link>
			</view>
			<view class="personal-list-item" @click="alertMessage">
				<image src="/static/bangzhu.png"  class="img"></image>
				<text class="personal-list-text">帮助与反馈</text>
			</view>
			<view class="personal-list-item">
				<a href="https://mp.weixin.qq.com/mp/homepage?__biz=MjM5MTA2MzY4NA==&hid=17&sn=7a1adf7a3b73e0b7f6832e772536417c&scene=1&devicetype=android-28&version=27000735&lang=zh_CN&nettype=WIFI&ascene=59&session_us=gh_492eac1e682b&wx_header=1">
					<image src="/static/meizhuang.png"  class="img"></image>
					<text class="personal-list-text">美妆护肤</text>
				</a>
			</view>
		
			<view class="personal-list-item">
				<a href="https://h5.weidian.com/m/organize/index.html?wfr=wxShare&from=singlemessage#/share/organization?orgId=17&type=1&privacy=0">
					<image src="/static/shequ.png"  class="img"></image>
					<text class="personal-list-text">商家社区</text>
				</a>
			</view>
			<view class="personal-list-item">
				<a href="javascript:void(0);" @click="navTo('/pages/home/reservation_list/reservation_shoper_add')">
					<image src="/static/dianyu-yuyue.png"  class="img"></image>
					<text class="personal-list-text">店务预约</text>
				</a>
			</view>
		</view>
	</view>
</template>
<script>
	import popup from '@/components/YYT-popup/YYT-popup.vue';
	
	export default {
		data() {
			return {
				//pop start
				openPopup: false,
				position: '',
				background: '#fff',
				openAdPopup: false,
				percent: 0,
				showText: false,
				change: false,
				loopTimer: false,
				//pop end
				islogin:0,
				uerInfo: {},
				userShopList:[],
				cusername:"",
				cpassword:"",
				shop_name:uni.getStorageSync('shop_name'),
				show_logout:false,
				show_login:false
			}
		},components: {
			popup
		},
		onShow:function(){
			if(uni.getStorageSync('admin_code')!=""){
				this.islogin=1;
				this.shop_name=uni.getStorageSync('shop_name');
				this.uerInfo={name:uni.getStorageSync('admin_name'),avatarUrl:uni.getStorageSync('admin_img').replace("/adminApp","")}
				this.getAdminShopList(uni.getStorageSync('admin_username'));
				
			}else{
				uni.navigateTo({
					url:'/pages/ucenter/login'
				})
			}
		},
		methods: {
			close(){
				this.openPopup = false;	
			},
			changeShop(){
				this.position = 'ad';
				this.openPopup = true;
			},
			getAdminShopList(username){
				uni.request({
					url: uni.getStorageSync('api_url')+'/store/getAdminShopList?page=1&limit=50&username='+username,
					complete: (result) => {
						uni.hideLoading();
						if(result.data.code != 1){
							uni.showToast({
								title:result.msg,
								icon:'none'
							});
						}else{
							this.userShopList=result.data.data.data;
							console.log(this.userShopList);
						}
						
					},
				});
			},
			updateDefaultShop(uinfo){
				uni.setStorageSync('admin_id',uinfo.id);
				uni.setStorageSync('admin_code',uinfo.auCode);
				uni.setStorageSync('shop_id',uinfo.sId);
				uni.setStorageSync('admin_phone',uinfo.phone);
				uni.setStorageSync('admin_name',uinfo.name);
				uni.setStorageSync('admin_username',uinfo.username);
				uni.setStorageSync('admin_img','/adminApp/static/work_member/default.jpeg');
				this.uerInfo={name:uni.getStorageSync('admin_name'),avatarUrl:uni.getStorageSync('admin_img').replace("/adminApp","")}
				uni.setStorageSync('shop_name',uinfo.sName);
				uni.setStorageSync('sCode',uinfo.sCode);						
				this.shop_name=uinfo.sName;
				this.close();
			},
			alertMessage(){
				uni.showToast({
					title:"功能暂未开放",
					icon:'none',
				    duration: 2000
				});
			},
			navTo(url){
				if(!this.islogin){
					url = '/pages/ucenter/login';
				}
				uni.navigateTo({  
					url
				})  
			}, 
			goLogin() {
				
					this.openPopup=true;
					if(uni.getStorageSync('admin_id')==""){
						this.show_login=true;
					}else{
						this.show_logout=true;
					}
			},show_work_member: function(){
				uni.redirectTo({
					url:'/pages/ucenter/work_member'
				})
				
			},subLogout(){
				uni.setStorageSync('admin_id',"");
				uni.setStorageSync('admin_name',"");
				uni.setStorageSync('admin_img',"");
				this.uerInfo={name:uni.getStorageSync('admin_name'),avatarUrl:uni.getStorageSync('admin_img')}
				this.openPopup=false;
				this.show_logout=false;
			}
		}
	}
</script>

<style>
	@font-face {
		font-family: texticons;
		font-weight: normal;
		font-style: normal;
		src: url('https://at.alicdn.com/t/font_984210_5cs13ndgqsn.ttf') format('truetype');
	}

	page,
	view {
		display: flex;
	}

	page {
		background-color: #f8f8f8;
	}

	.center {
		flex-direction: column;
		background-color: #eaeaea;
	}

	.logo {
		width: 750upx;
		height: 240upx;
		padding: 20upx;
		box-sizing: border-box;
		background: linear-gradient(to right,#feac5e,#c779d0,#4bc0c8);
		flex-direction: row;
		align-items: center;
	}

	.logo-hover {
		opacity: 0.8;
	}

	.logo-img {
		width: 150upx;
		height: 150upx;
		border-radius: 150upx;
	}

	.logo-title {
		height: 150upx;
		flex: 1;
		align-items: center;
		justify-content: space-between;
		flex-direction: row;
		margin-left: 20upx;
	}

	.uer-name {
		height: 60upx;
		line-height: 60upx;
		font-size: 38upx;
		color: #FFFFFF;
	}

	.go-login.navigat-arrow {
		font-size: 38upx;
		color: #FFFFFF;
	}

	.login-title {
		height: 150upx;
		align-items: self-start;
		justify-content: center;
		flex-direction: column;
		margin-left: 20upx;
	}

	.center-list {
		background-color: #FFFFFF;
		width: 750upx;
		flex-direction: column;
	}


	.list-icon {
		width: 40upx;
		height: 90upx;
		line-height: 90upx;
		font-size: 34upx;
		color: #2F85FC;
		text-align: center;
		font-family: texticons;
		margin-right: 20upx;
	}

	.list-text {
		height: 90upx;
		line-height: 90upx;
		font-size: 34upx;
		color: #555;
		flex: 1;
		text-align: center;
	}

	.navigat-arrow {
		height: 90upx;
		width: 40upx;
		line-height: 90upx;
		font-size: 34upx;
		color: #555;
		text-align: right;
		font-family: texticons;
	}
	.login-form input{
		border: 1px solid #ccc;
    border-radius: 5px;
    padding: 5px;
	}
	.b-line{line-height: 40px;
    height: 60px;clear: both;}
	
	.personal-list{
		display: block;
		    width: 96%;
		    margin: 20px auto;
			background: #FFFFFF;
	}
	.personal-list-item{
		box-sizing: border-box;
		width: 50%;
		float: left;
		text-align: center;
		display: flex;
		flex-direction: column;
		font-size: 14px;
		padding: 45px;
	}
	.personal-list-item a{
		    display: flex;
		    flex-direction: column;
		    text-decoration: none
	}
	.personal-list-item uni-image.img{
		width: 35px;
		height: 35px;
		margin: 0px auto;
	}
	.personal-list-item {
		border-right:1px solid #ccc;
		border-bottom:1px solid #ccc;
	}
	.personal-list-item:nth-of-type(even){
		border-right:none;
	}
	.personal-list-item:nth-of-type(5){
		border-bottom:none;
	}
	.personal-card {
		display:flex;
		justify-content: center;
		margin: 20px;
		padding: 10px;
		box-shadow: 8px 8px 16px #888888;
	}
	.personal-card a{
		text-decoration: none;
		position: relative;
	}
	.personal-card a:after{
		content:"";
		display:block;
		background-image: url("../../static/pointer.png");
		    width: 20px;
		    height: 20px;
		    background-size: cover;
		    position: absolute;
		     bottom: -5px;
		     right: -15px;
	}
	.text-effect{
		color: #6d1c79;
		font-size: 20px;
		text-transform: uppercase;
		text-align: center;
		letter-spacing: 8px;
		margin: 30px auto 0;
		transition: all 1s ease;
		animation:Glow 1s ease infinite alternate;
	}
	@keyframes  Glow {

    from {

        text-shadow: 0 0 10px #fe5e99,

                     0 0 20px #fe5e99,

                     0 0 30px #fe5e99,

                     0 0 40px #fe5e99,

                     0 0 70px #fe5e99,

                     0 0 80px #fe5e99,

                     0 0 100px #fe5e99,

                     0 0 150px #fe5e99;

    }

    to {

        text-shadow: 0 0 5px #fff,

                     0 0 10px #fff,

                     0 0 15px #fff,

                     0 0 20px #fe5e99,

                     0 0 35px #fe5e99,

                     0 0 40px #fe5e99,

                     0 0 50px #fe5e99,

                     0 0 75px #fe5e99;

    }

}
	.shop-name{    color: #fff;
	top: 14%;
	    right: 5%;
	text-shadow: 5px 5px 5px #000000;
	position: absolute;}
	.shop-change{background: #b130c4;
	border-radius: 5px;
	padding: 3px 10px;
	margin-left: 20px;cursor: pointer;}
	.shop-btn{display: block !important;}
	.shop-btn button{width: 90%;margin: 10px auto;}
	.shop-btn button.active{background: #b130c4; color:#fff;}
</style>
